<template>
  <div class="card-box">
    <div class="title-box"  @click="toDetail">
      <img class="image" src="@/assets/images/index/小标题@2x.webp" alt=""/>
      <div class="title">{{ title }}</div>
    </div>
    <slot>hello</slot>
  </div>
</template>

<script lang="ts" setup>
  defineProps({
    title: { type: String, default: '' },
    width: { type: String, default: '100%' },
    height: { type: String, default: '100%' }
  })

  const emit = defineEmits(['detail'])
  const toDetail = () => {
    emit('detail')
  }
</script>

<style lang="scss" scoped>
  .card-box {
    position: relative;
    padding-top: 67px;
    box-sizing: border-box;

    .title-box {
      position: absolute;
      left: 0;
      top: 0;
      width: 435px;
      height: 67px;
      cursor: pointer; /* 设置光标为手形 */


      .image {
        position: absolute;
        top: 0;
        left: -10px;
        width: 435px;
        height: 67px;
      }

      .title {
        position: absolute;
        left: 0;
        top: 0;
        margin: 12px 0 0 60px;
        width: 100%;
        height: 100%;
        font-size: 26px;
        font-family: 'YouSheBiaoTiHei';
      }
    }

  }
</style>